<template>
<div class="upload-report-container">
    <MultipleFileSelect
        :title="reportFiles.length>0?`已选文件(${reportFiles.length})个`:'选择上传报告'"
        accept='.xls'
        @onChange="f=>{
            reportFiles = f || [];
        }">
    </MultipleFileSelect>
    <el-button 
        type="primary" icon="el-icon-upload"
        :loading="loading"
        :disabled="reportFiles.length==0"
        style="background: #1E36D4;border-color:#1E36D4;"
        @click="onUpload">
        上传
    </el-button>
    <el-button 
        type="danger" icon="el-icon-delete-solid"
        :disabled="reportFiles.length==0"
        style="background: #E23131;border-color:#E23131;"
        @click="onRemove">
        清空
    </el-button>
</div>
</template>
<script>
/*
 报告上传
 */
import MultipleFileSelect from "@/components/MultipleFileSelect";
export default {
    components:{MultipleFileSelect},
    data() {
        return {
            loading:false,
            reportsData:{},  //报告
            reportFiles:[],  //报告文件
        };
    },
    methods:{
        onUpload(){
            this.loading = true;
            let formData = new FormData();
            this.reportFiles.forEach(item=>{
                formData.append('files',item);
            });
            this.$Service
                .post(
                    this.$Api.mulreport,
                    formData,
                ).then(res => {
                    this.reportsData = res.data;
                    this.$message({
                        message: res.msg,
                        type: 'success',
                    });
                    this.$emit('onUploadSuccess',this.reportsData);
                    this.onRemove();
                })
                .catch(res=>{
                    this.$message({
                        message: res.msg,
                        type: 'error',
                    });
                })
                .finally(() => {
                    this.loading = false;
                });
        },
        onRemove(){
            this.reportsData = {};
            this.reportFiles = [];
        },
    },
}
</script>
<style lang="scss" scoped>
.upload-report-container{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr max-content max-content max-content;
    grid-gap: 1rem;
    align-items: center;
    .el-select{
        width: 12rem;
    }
    button{
        margin: 0;
    }
}
</style>